import React, { Fragment } from 'react';
import { Card, Row, Col, Divider } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import style from './style.less';
import StaticTable from './staticTable';
import StaticTableDetail from '../Payapply/staticTable';

const { Description } = DescriptionList;
const xxl = {
  span: 6,
};
const xl = {
  span: 7,
};
const lg = {
  span: 8,
};
const md = {
  span: 24,
};
const sm = 24;
const colProps = {
  xxl,
  xl,
  lg,
  md,
  sm,
};
const ClaimInfor = ({
  foreign,
  bill,
  columns,
  rowKey,
  processInfor,
  title,
  clmAmo,
  nonRemiAmount,
  detailFlag,
}) => (
  <Fragment>
    {!!processInfor.remitList.length && (
      <Card title="已选汇款单">
        {processInfor.remitList.map((item, i) => (
          <DescriptionList key={item.remitId}>
            <Description term="汇款人姓名">{item.payName || '--'}</Description>
            <Description term="汇款金额（元）">{item.remiAmo || '--'}</Description>
            {clmAmo && <Description term="认领金额（元）">{item.clmAmo || '--'}</Description>}
            {nonRemiAmount && (
              <Description term="可认领金额（元）">{item.nonRemiAmount || '--'}</Description>
            )}
            {processInfor.remitList.length === i + 1 ? null : <Divider dashed />}
          </DescriptionList>
        ))}
      </Card>
    )}
    {/* 跟上一步表格字段一样 */}
    <Card title={title}>
      {detailFlag ? (
        <StaticTableDetail
          businessData={processInfor.dataRcrdsList}
          rowKey={rowKey}
          columns={columns}
        />
      ) : (
        <StaticTable businessData={processInfor.dataRcrdsList} rowKey={rowKey} columns={columns} />
      )}
    </Card>
    <Card title="合计信息">
      <div style={{ color: '#F5A623', fontSize: 14 }}>
        {processInfor.remitFlag && processInfor.remitFlag !== 0 ? (
          <span style={{ display: 'inline-block', marginRight: 10 }}>
            差额(元)：{processInfor.remitFlag === 1 ? '汇款单多' : '账单多'}
            {processInfor.acctBalance || '--'}
          </span>
        ) : null}
        {processInfor.clmAmo && <span>认领金额（元）：{processInfor.clmAmo}</span>}
      </div>
      <Row gutter={24}>
        <Col {...colProps}>
          <div className={style.totalDiv}>
            <p>已选汇款单：{processInfor.remitNum}</p>
            <p className={style.totalP}>总金额</p>
            <p className={style.totalAmt}>{processInfor.remitAmo}</p>
            <img src={foreign} alt="" />
          </div>
        </Col>
        <Col {...colProps}>
          <div className={style.totalDiv}>
            <p>已选账单：{processInfor.dataNum}</p>
            <p className={style.totalP}>总金额</p>
            <p className={style.totalAmt}>{processInfor.dataAmo}</p>
            <img src={bill} alt="" />
          </div>
        </Col>
      </Row>
    </Card>
  </Fragment>
);

export default ClaimInfor;
